<template>
  <div class="flex flex1 left_box" style="margin: -2rem 1rem 1rem 1rem">
     <div class="flex1 flexC">
       <div class="flex1 bk flexC">
          <p class="title flex"><i class="title_line"></i><span>动态监管</span></p>
         <ul class="dtjg_ul flex1">
           <li class="flexC font_s16 AlignItemsC flex1 JustifyContentC"
               v-for="(item,index) in dtjgList"
               :key=index
               @click="listFun(index, item.title)">
              <div class="flex JustifyContentC AlignItemsC " style="color:#D6FDFF;">
                <img :src=item.imgUrl alt=""/>
                <span class="font_s32" style="font-weight: normal;color: #75FBFE">{{item.num}}</span>
                条
              </div>
              <p>{{item.title}}</p>
           </li>
         </ul>
       </div>
       <div class="flex2 bk flexC" style="margin: .5rem 0">
         <div class="title flex"><i class="title_line"></i><span>风险监管</span>
           <div class="flex font_s14" style="position: absolute;right: 0;top: .4rem">
               <p class="botton_bg" @click="jgModal(1, '风险模型')">风险模型</p>
               <p class="botton_bg" @click="jgModal(4, '协同监管数据大平台风险模型表')">标准查看</p>
            </div>
         </div>
         <ul class="flex1 fx_ul">
            <li class="flexC font_s16 JustifyContentC AlignItemsC"
                v-for="(item, index) in fxList"
                :key="index"
                :class="{cur_blue:isActive===index + 1}"
                @click="switchMap(index)">
              <p class="flex">风险评估等级 <span :style="{color: item.colorStyle, marginLeft: '.4rem'}">{{item.dj}}</span></p>
              <p><span class="font_s28 num" :style="{color: item.colorStyle, marginRight: '.4rem'}">{{item.num}}</span>家</p>
            </li>
         </ul>
         <div class="title flex positionR" style="margin-top: .5rem">
           <i class="title_line"></i><span>信用监管</span>
           <div class="flex font_s14" style="position: absolute;right: 0;top: .4rem">
             <p class="botton_bg" @click="jgModal(2, '信用模型')">信用模型</p>
             <p class="botton_bg" @click="jgModal(5, '协同监管数据大平台信用模型表')">标准查看</p>
           </div>
         </div>
         <ul class="flex1 fx_ul">
           <li class="flexC font_s16 JustifyContentC AlignItemsC"
               v-for="(item, index) in xyList"
               :key="index"
               :class="{cur:isActive===index + 4}"
               @click="switchMap(index + 3)">
             <p class="flex">信用评估等级 <span :style="{color: item.colorStyle, marginLeft: '.4rem'}">{{item.dj}}</span></p>
             <p><span class="font_s28 num" :style="{color: item.colorStyle, marginRight: '.4rem'}">{{item.num}}</span>家</p>
           </li>
         </ul>
       </div>
       <div class="flex1 bk flexC">
         <div class="title flex"><i class="title_line"></i><span>分类监管</span>
           <div class="flex font_s14" style="position: absolute;right: 0;top: .4rem">
             <p class="botton_bg" @click="jgModal(3, '监管频次')">监管频次</p>
             <p class="botton_bg" @click="jgModal(6, '分类模型')">分类模型</p>
           </div>
         </div>
         <div class="flex flex1">
           <div class="flex1 positionR flexC JustifyContentC AlignItemsC font_s16 fljg_box" @click="switchFljgMap('1')">
             <div style="width: 5.25rem;height: 5.25rem" class="positionR">
               <img src="@/assets/img/zhjg/ic_yijigongmu.png" alt="" style="width: 5.25rem;height: 5.25rem" class="fanzhuan_r"/>
               <p class="content_num"><span class="font_s28" style="color: #75FBFE">{{headData.orgLevel1num}}</span>家</p>
             </div>
             <p class="content_title">一级公墓 <br/>(骨灰堂)</p>
           </div>
           <div class="flex1 positionR flexC JustifyContentC AlignItemsC font_s16 fljg_box" @click="switchFljgMap('2')">
             <div style="width: 5.25rem;height: 5.25rem" class="positionR">
               <img src="@/assets/img/zhjg/ic_yijigongmu.png" alt="" style="width: 5.25rem;height: 5.25rem" class="fanzhuan_l"/>
               <p class="content_num"><span class="font_s28" style="color: #75FBFE">{{headData.orgLevel2num}}</span>家</p>
             </div>
             <p class="content_title">二级公墓 <br/>(骨灰堂)</p>
           </div>
           <div class="flex1 positionR flexC JustifyContentC AlignItemsC font_s16 fljg_box" @click="switchFljgMap('0')">
             <div style="width: 5.25rem;height: 5.25rem" class="positionR">
               <img src="@/assets/img/zhjg/ic_yijigongmu.png" alt="" style="width: 5.25rem;height: 5.25rem" class="fanzhuan_r"/>
               <p class="content_num"><span class="font_s28" style="color: #75FBFE">{{headData.orgLevel0num}}</span>家</p>
             </div>
             <p class="content_title">待评定等级公墓 <br/>(骨灰堂)</p>
           </div>
         </div>
       </div>
     </div>
    <comprehensiver-right />
    <modal-list v-if=listModal
                :title=title
                @hidden="hidden(listModal)">
      <DtjgListModal :dataList=dataList />
    </modal-list>
    <modal-list  v-if=listModal2
                 :title=title
                 @hidden="hidden(listModal2)">
      <f-x-standard-view-model  v-if="modalType === 5 || modalType === 4"  />
    </modal-list>
    <modal-polygon v-if="greenModal"
                   :title=title
                   @hidden="hidden(greenModal)">
        <risk-modal  v-if="modalType === 1" />
        <credit-modal v-if="modalType === 2" />
    </modal-polygon>
    <modal v-if="jgpcModal" @hidden="hidden(jgpcModal)">
      <supervise-frequency v-if="modalType === 3" />
    </modal>
    <classify-modal v-if="classifyModal"
                    @hidden="hidden(classifyModal)" />
  </div>
</template>

<script>
  import ComprehensiverRight from "./ComprehensiverRight";
  import { queryBzfwYjlyCount, queryBzfwOrgNoPageList, queryBzfwOrderEnd, queryBzfwWarnEndList } from '@/api/home'
  import storage from '../../components/storage.js'
  import { gdmapOther } from '../../assets/gdmap'
  import ModalList from "../../components/ModalList";
  import DtjgListModal from "./modal/DtjgListModal";
  import ModalPolygon from "../../components/ModalPolygon";
  import RiskModal from "./modal/RiskModal";
  import CreditModal from "./modal/CreditModal";
  import Modal from "../../components/Modal";
  import SuperviseFrequency from "./modal/SuperviseFrequency";
  import FXStandardViewModel from "./modal/FXStandardViewModel";
  import ClassifyModal from "./modal/ClassifyModal";
  export default {
    name: "Comprehensive",
    components: {
      ClassifyModal,
      FXStandardViewModel,
      SuperviseFrequency,
      Modal, CreditModal, RiskModal, ModalPolygon, DtjgListModal, ModalList, ComprehensiverRight},
    data () {
      return {
        isActive: 1,
        dtjgList: [
          { title: '日常检查', num: 0, imgUrl: require('@/assets/img/zhjg/rcjc_icon.png')},
          { title: '智能发现', num: 0, imgUrl: require('@/assets/img/zhjg/znfx_icon.png')},
          { title: '日常发现', num: 0, imgUrl: require('@/assets/img/zhjg/rcfx_icon.png')},
          { title: '年审反馈', num: 0, imgUrl: require('@/assets/img/zhjg/yijianfankui.png')},
        ],
        fxList: [
          { dj: 'A',num: 0, colorStyle: '#75FBFE'},
          { dj: 'B',num: 0, colorStyle: '#F9DD6A'},
          { dj: 'C',num: 0, colorStyle: '#CB5D62'}
        ],
        xyList: [
          { dj: 'A',num: 0, colorStyle: '#75FBFE'},
          { dj: 'B',num: 0, colorStyle: '#F9DD6A'},
          { dj: 'C',num: 0, colorStyle: '#CB5D62'}
        ],
        headData: Object,
        mapList: [],
        djType: '',
        classifyModal: false,
        jgpcModal: false,
        greenModal: false,
        listModal2: false,
        listModal: false,
        title: '',
        dataList: [],
        modalType: 0
      }
    },
    created () {
      let topData = storage.get('headData')
      if (topData) {
        this.headData = topData
        this.fxList[0].num = this.headData.fxdjAnum
        this.fxList[1].num = this.headData.fxdjBnum
        this.fxList[2].num = this.headData.fxdjCnum
        this.xyList[0].num = this.headData.xydjAnum
        this.xyList[1].num = this.headData.xydjBnum
        this.xyList[2].num = this.headData.xydjCnum
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      jgModal (index, title) {
        this.title = title
        this.modalType = index
        if (index === 1 || index === 2) {
          this.greenModal=true
        } else if (index === 3) {
          this.jgpcModal = true
        } else if (index === 4 || index === 5) {
          this.listModal2 = true
        } else if (index === 6) {
          this.classifyModal = true
        }
      },
      listFun (index, title) {
        this.title = title
        this.listModal = true
        if (index === 0) {
          this.queryRcjcNum()
        } else {
          this.queryYJLY(index)
        }
      },
      queryRcjcNum () {
        queryBzfwOrderEnd().then((response) => {
          if (response.data) {
            this.dataList = response.data.response
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      /* 2-日常发现/1-智能发现/3-年审反馈 */
      queryYJLY (yjly) {
        queryBzfwWarnEndList({
          yjly: yjly
        }).then((response) => {
          if (response.data) {
            this.dataList = response.data.response
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      switchMap (index) {
        this.$root.MapGd = null
        window.gmap.clearMap()
        this.isActive = index + 1
        console.log('index:', this.isActive)
        if (index === 0 || index === 3) {
          this.djType = 'A'
          if (index === 0) {
            this.getMap(this.djType, '', '')
          } else {
            this.getMap('', this.djType, '')
          }
        } else if (index === 1 || index === 4) {
          this.djType = 'B'
          if (index === 1) {
            this.getMap(this.djType, '', '')
          } else {
            this.getMap('', this.djType, '')
          }
        } else if (index === 2 || index === 5) {
          this.djType = 'C'
          if (index === 2) {
            this.getMap(this.djType, '', '')
          } else {
            this.getMap('', this.djType, '')
          }
        }
      },
      switchFljgMap (type) {
        this.getMap('', '', type)
      },
      getMap (fxdjType, xydjType, orgLevelType) {
        queryBzfwOrgNoPageList ({
          fxdj: fxdjType,
          xydj: xydjType,
          orgLevel: orgLevelType
        }).then((response) => {
          if (response) {
            this.mapListData = response.data.response
            gdmapOther(window.gmap, this.mapListData, 1, this.djType)
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      getData () {
        queryBzfwYjlyCount().then((response) => {
          if (response.data) {
            let data = response.data.response
            this.dtjgList[0].num = data.rcjc
            this.dtjgList[1].num = data.znfx
            this.dtjgList[2].num = data.rcfx
            this.dtjgList[3].num = data.nsfk
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      hidden (choose) {
        if (choose === this.listModal) {
          this.listModal = false
        }
        if (choose === this.greenModal) {
          this.greenModal = false
        }
        if (choose === this.jgpcModal) {
          this.jgpcModal = false
        }
        if (choose === this.listModal2) {
          this.listModal2 = false
        }
        if (choose === this.classifyModal) {
          this.classifyModal = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.left_box {
 .bk {
   background: url("~@/assets/img/zhjg/small_gray_bg.png") no-repeat;
   background-size: 100% 100%;
   padding: .6rem .5rem .5rem .5rem;
   box-sizing: border-box;
 }
  .title {
    height: 2.8125rem;
    line-height: 2.8125rem;
    padding-left: 1rem;
    position: relative;
    background: url("~@/assets/img/zhjg/ic_baioqian.png") no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC;
    .title_line {
      width: 3px;
      height: 1.125rem;
      margin-top: .84375rem;
      margin-right: .6rem;
      background: linear-gradient(0deg, #87CCED, #D8FBFE);
    }
    span{
      font-weight: bold;
      color: #97E2F4;
      background: linear-gradient(0deg, #87CCED 0%, #D8FBFE 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .dtjg_ul { width: 100%;height: 100%}
  .num {
    font-family: Impact;
    font-weight: 400;
  }
  .dtjg_ul li {
    width: 25%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #7FDDE1;
    float: left;
    height: 100%;
    img {
      width: 3.2875rem;
      height: 3.2875rem;
    }
    span{
      font-family: Impact;
      margin-right: .3rem;
    }
    p {
      line-height: 1.7rem;
      text-align: center;
    }
  }
  .botton_bg {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: #0C1935;
    border: 1px solid #17558D;
    border-radius: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin-left: .4rem;
    padding: 0 .7rem;
    color: #CEF9FC;
  }
  .fx_ul {
    height: 100%;
  }
  .fx_ul li {
    width: 32%;
    float: left;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #CEF9FC;
    height: 90%;
    margin-top:2%;
    margin-right: 1%;
    background: url("~@/assets/img/zhjg/jianguan_bg.png") no-repeat;
    background-size: 100% 100%;
    p:first-child {
      margin-bottom: .5rem;
    }
  }
  .fx_ul li:last-child{margin-right: 0}
  .cur_blue {
    background: url("~@/assets/img/zhjg/cur_blue.png") no-repeat!important;
    background-size: 100% 100%!important;
  }
  .cur {
    background: url("~@/assets/img/zhjg/cur_blue.png") no-repeat!important;
    background-size: 100% 100%!important;
  }
  .fljg_box {
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #CEF9FC;
    line-height: 1.25rem;
    .content_num {
      position: absolute;left: 0;top: 0;line-height: 5.25rem;text-align: center;width: 5.25rem;
      span{font-family: Impact;}
    }
    .content_title {
      line-height: 1.45rem;
      text-align: center;
    }
  }
  .fanzhuan_r {
    animation: App-logo-spinR infinite 20s linear;
  }
  .fanzhuan_l {
    animation: App-logo-spinL infinite 20s linear;
  }
  @keyframes App-logo-spinR {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
  @keyframes App-logo-spinL {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0deg);
    }
  }
}
</style>